<template>
  <div>
    <ul class="space-content" v-if="spaceList.length">
      <li v-for="(item, index) in spaceList" :key="index">
        <div class="user-info">
          <div class="user-pic" @click="goUserSpaceDetails(item.userId._id)">
            <img :src="$baseUrl + item.userId.imgUrl" alt="" />
          </div>
          <div class="user">
            <div class="user-nick">{{ item.userId.nick }}</div>
            <div class="time">{{ item.time }}</div>
          </div>
          <!-- 删除说说按钮 -->
          <van-icon
            name="delete-o"
            class="del-space"
            v-if="item.userId._id === userId"
            @click="delSpace(item._id, index)"
          />
        </div>
        <div class="space-text">{{ item.textDesc }}</div>
        <ul class="pic-content">
          <li
            v-for="(i, k) in item.photos"
            :key="k"
            @click="lookPic(item.photos, k)"
            :style="`height: ${picItemHeight}px;`"
          >
            <div
              class="img-content"
              :style="`background-image: url(${$baseUrl + i});`"
            ></div>
          </li>
        </ul>
      </li>
    </ul>
    <!-- 无数据 -->
    <div class="nomore" v-else>
      <img src="@/assets/no_space.png" alt="" />
      <div class="nomore-text">暂无更多...</div>
    </div>
  </div>
</template>

<script>
import { ImagePreview, Toast, Dialog } from "vant"
import { reqDelSpace } from '@/api'
import { mapState } from 'vuex'
export default {
    props: ['spaceList'],
    data() {
        return {
            picItemHeight: (window.innerWidth - (30 * 2 / 75)) / 3
        }
    },
    computed: {
        ...mapState({
            userId: state => state.login.userInfo._id
        })
    },
    methods: {
        lookPic(imgList, index) {
            let list = imgList.map(i => {
                return this.$baseUrl + i
            })
            ImagePreview({
                images: list,
                loop: false,
                closeable: true,
                startPosition: index
            })
        },
        // 删除动态
        delSpace(id, index) {
            Dialog.confirm({
                message: '确定删除该条说说吗？'
            })
            .then(async() => {
                // 确认
                let res = await reqDelSpace({_id: id})
                if (res.status === 200) {
                    this.spaceList.splice(index, 1)
                }
                Toast(res.msg)
            })
            .catch(() => {
                // 取消
            })
        },
        // 去用户空间
        goUserSpaceDetails(_id) {
            this.$router.push({
                path: '/spacedetails',
                query: {
                    _id
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.space-content {
    width: 100%;
    &>li {
        width: 100%;
        background-color: #fff;
        padding: .4rem .3333rem;
        box-sizing: border-box;
        margin-bottom: .2667rem;
        .user-info {
            width: 100%;
            height: 1.0667rem;
            display: flex;
            align-items: center;
            margin-bottom: .4rem;
            .user-pic {
                width: 1.0667rem;
                height: 1.0667rem;
                border-radius: 50%;
                overflow: hidden;
                margin-right: .3333rem;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .user {
                display: flex;
                flex: 1;
                height: 100%;
                flex-direction: column;
                justify-content: space-around;
                .user-nick {
                    font-size: .4rem;
                }
                .time {
                    font-size: 0.3333rem;
                    color: #858585;
                }
            }
            .del-space {
                font-size: .4667rem;
                align-self: flex-start;
            }
        }
        .space-text {
            font-size: .4rem;
            line-height: .5333rem;
            margin-bottom: .4rem;
        }
        .pic-content {
            width: 100%;
            margin-bottom: .1333rem;
            display: flex;
            flex-wrap: wrap;
            li {
                width: 33.33333%;
                // height: 3.0667rem;
                overflow: hidden;
                padding: .0667rem;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: .2rem;
                .img-content {
                    width: 100%;
                    height: 100%;
                    background-size: cover;
                    background-repeat: no-repeat;
                    background-position: center;
                }
            }
        }
    }
}
.nomore {
    width: 100%;
    height: 9.3333rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: .6667rem;
    box-sizing: border-box;
    .nomore-text {
        margin-top: .2667rem;
        font-size: .3733rem;
        color: #858585;
    }
}
</style>
